<template>
  <div id="tab" class="tab" ref="tab">
    <ul class="tab_content" ref="tabWrapper" style="touch-action: none;">
     <li @click="selectGood(hotSearch.id)" class="tab_item" v-for="hotSearch in hotname" :key='hotSearch.index' ref="tabitem">
        {{hotSearch.title}}
      </li>
    </ul>
  </div>
</template>

<script type="ECMAScript 6">
   import BScroll from 'better-scroll';
    export default {
        name: 'hot-sercher',
        props: {
          hotname: {
            type: Array
          }
        },
        methods: {
          selectGood (id) {
            this.$router.push({
              path: 'goodDetail',
              query: {goodId: id}
            });
          }
        },
        created () {
          this.$nextTick(() => {
            let width = this.hotname.length * 71.5;
            this.$refs.tabWrapper.style.width = width + 'px';
            this.$nextTick(() => {
              if (!this.scroll) {
                this.scroll = new BScroll(this.$refs.tab, {
                  startX: 0,
                  click: true,
                  scrollX: true,
                  scrollY: false,
                  scrollbar: {
                    fade: false,
                    interactive: true
                  },
                  eventPassthrough: 'vertical',
                  mouseWheel: true
                });
              } else {
                this.scroll.refresh();
              }
            });
          });
        }
    };
</script>

<style lang="stylus" scoped>
    .tab
      position: relative;
      margin-left: 10px;
      margin-bottom: 1px;
      min-height: 34px;
      width: 100%;
      overflow: hidden;
      .tab_content
        padding-top 7px;
        white-space: nowrap;
        min-width: 300px;
        overflow: hidden;
        .tab_item
           display inline-block; margin-right: 5px;  font-size: 16px;  text-align: center;
</style>
<style lang="stylus" rel="stylesheet/stylus">
  #tab
    &>.bscroll-horizontal-scrollbar
      position: relative!important; z-index: 1000!important; height 3px!important; margin 4px auto 0 auto !important; border-radius 3px!important; width 100px!important; overflow: hidden; background #eee!important;
      &>.bscroll-indicator
        width: 50px!important; height 3px!important; border none !important; border-radius: 3px!important;background: #ee7b0f!important;
</style>
<style type="text/css" scoped>
  .tab_item:last-of-type{ margin: 0!important;}
</style>
